 <template>
 	<view class="container">
		<!-- 支付状态 -->
		<view class="status-name">
			<view class="status">等待付款</view>
			<!-- <view class="status">待自提</view> -->
			<!-- <view class="status">等待商家发货</view> -->
			<!-- <view class="status">商家已发货</view> -->
			<!-- <view class="status">订单已完成</view> -->
			<!-- <view class="status">已完成</view> -->
			<view class="name">剩余时间：23小时14分钟订单关闭</view>
		</view>
		
		<!-- 查看售后信息 -->
		<view class="sales-box" @tap="goAfterSalesDetail">
			<view>查看售后信息</view>
			<u-icon name="arrow-right" color="#516DDB" size="16"></u-icon>
		</view>
		
 		<view class="item">
			<view class="icon">
				<u-image width="100%" height="2rpx" src="/static/images/line.png"></u-image>
			</view>
 			<view style="width: 100%;">
 				<view class="user-info-box">
 					<view class="user-info">
 						<view class="name">漳大校</view>
 						<view class="name">15012349999</view>
 					</view>
					<view class="icon-box" style="position: relative;z-index: 99;" @tap="showCancelPop">
						<view class="">位置导航</view>
						<u-image width="24rpx" height="24rpx" src="/static/images/a19.png"></u-image>
					</view>
 				</view>
 				<view class="address">
 					辽宁省 沈阳市 浑南区 浦江东方大厦2006室
 				</view>
 			</view>
 		</view>

 		<view class="order-item">
 			<view class="commodity-box">
 				<view class="left">
 					<u-image width="170rpx" height="155rpx" src="/static/logo.png"></u-image>
 				</view>
 				<view class="right">
 					<view class="com-title">四川眉山爱媛38号可吸的果冻橙四川眉山爱媛38号可吸的果冻橙四川眉山爱媛38号可吸的果冻橙</view>
 					<view class="sku-box">规格：超实惠套装1200g</view>
 					<view class="count-box">购买数量：3件</view>
 				</view>
 			</view>
 			<view class="content-box">
 				<view class="content-item">
 					<text>商品总计</text>
 					<text>￥555.22</text>
 				</view>
 				<view class="content-item">
 					<text>抵扣券</text>
 					<text>减30元</text>
 				</view>
 				<view class="content-item">
 					<text>配送方式</text>
 					<text>到店自提</text>
 				</view>
				<view class="content-item">
					<text>运费</text>
					<text>--</text>
				</view>
 			</view>
			
			<view class="all-price-box">
				<view class="">合计</view>
				<view class="price">￥525.22</view>
			</view>
 		</view>
		
		<!-- 订单信息 -->
		<view class="order-item">
			<view class="status-box">
				<view class="name">订单信息</view>
			</view>
			<view class="content-box">
				<view class="content-item">
					<text>订单编号</text>
					<view class="">
						<text>zld2368946797167</text>
						<text class="copy">复制</text>
					</view>
				</view>
				<view class="content-item">
					<text>下单时间</text>
					<text>2024-05-26 12:03:23</text>
				</view>
				<view class="content-item">
					<text>支付方式</text>
					<text>微信支付</text>
				</view>
				<view class="content-item">
					<text>付款时间</text>
					<text>--</text>
				</view>
				<view class="content-item">
					<text>发货时间</text>
					<text>--</text>
				</view>
				<view class="content-item">
					<text>收货时间</text>
					<text>--</text>
				</view>
			</view>
		</view>
		
 		<!-- 物流单号 -->
 		<view class="order-item">
 			<view class="status-box">
 				<view class="name">物流单号</view>
 			</view>
 			<view class="content-box">
 				<view class="content-item">
 					<text>物流单号：</text>
 					<view class="order-no">
 						<text>1635461352156465</text>
						<u-image width="26rpx" height="26rpx" src="/static/images/a62.png"></u-image>
 					</view>
 				</view>
 				<view class="content-img">
 					<u-image radius="10" width="100%" height="220rpx" src="/static/logo.png"></u-image>
 				</view>
 			</view>
 		</view>
		
		<!-- 退款信息 -->
		<view class="order-item">
			<view class="status-box">
				<view class="name">退款信息</view>
			</view>
			<view class="content-box">
				<view class="content-item">
					<text>退款原因</text>
					<text>换个时间段</text>
				</view>
				<view class="content-item">
					<text>申请时间</text>
					<text>2023-12-16  15:00:16</text>
				</view>
				<view class="content-item">
					<text>退款到账时间</text>
					<text>2023-12-16  15:00:16</text>
				</view>
			</view>
		</view>
		
		
		<!-- 联系商家 -->
		<view class="concat-card">
			<u-image width="24rpx" height="32rpx" src="/static/images/a58.png"></u-image>
			<view class="">联系商家</view>
		</view>
 	</view>

 	<!-- 按钮区 -->
 	<view class="btn">
		<!-- 申请售后 -->
		<view class="">
			<u-button plain throttleTime="1000" :customStyle="{width: '298rpx', height: '86rpx', letterSpacing: '.1rem'}" :hairline="true" type="mini" shape="circle"
				color="#516DDB" @click="showApplyRefundPop">申请退货退款</u-button>
		</view>
		<!-- <view class="">
			<u-button plain throttleTime="1000" :customStyle="{width: '216rpx', height: '86rpx', letterSpacing: '.1rem'}" :hairline="true" type="mini" shape="circle"
				color="#516DDB" @click="showSalesPop">申请售后</u-button>
		</view>
 		<view class="">
 			<u-button plain throttleTime="1000" :customStyle="{width: '216rpx', height: '86rpx', letterSpacing: '.1rem'}" :hairline="true" type="mini" shape="circle"
 				color="#516DDB" @click="showCancelPop">取消订单</u-button>
 		</view> -->
		<view class="">
			<u-button throttleTime="1000" :customStyle="{width: '216rpx', height: '86rpx', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle"
				color="#516DDB" @click="showPayPop">去支付</u-button>
		</view>
		<!-- 确认收货 -->
		<!-- <view class="">
			<u-button throttleTime="1000" :customStyle="{width: '216rpx', height: '86rpx', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle"
				color="#516DDB" @click="showPayPop">确认收货</u-button>
		</view> -->
		<!-- 再次购买 -->
		<!-- <view class="">
			<u-button throttleTime="1000" :customStyle="{width: '216rpx', height: '86rpx', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle"
				color="#516DDB" @click="showPayPop">再次购买</u-button>
		</view> -->
 	</view>
	
	
	<!-- 取消订单弹窗 -->
	<u-popup closeable bgColor="transparent" :show="cancelPop" @close="cancelPop = false">
		<view class="cancel-pop">
			<view class="pop-title">请选择退号的原因（必选）：</view>
			<view class="radio-wrap">
				<u-radio-group v-model="radiovalue" placement="column">
					<u-radio  :customStyle="{marginBottom: '46rpx'}" v-for="(item, index) in radiolist" :key="index" activeColor="#6087EF"
						:label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
			</view>
			<view class=" ">
				<u-button throttleTime="1000" :customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">确认</u-button>
			</view>
		</view>
	</u-popup>
	
	
	<!-- 支付弹窗 -->
	<u-popup closeable bgColor="transparent" :show="payPop" @close="payPop = false">
		<view class="pay-pop">
			<view class="pay-content">
				<view class="title">
					选择支付方式
				</view>
				<!-- 支付选择 -->
				<view class="payment-select-box">
					<u-radio-group v-model="payment" placement="column">
						<view class="payment-item">
							<view class="left">
								<u-image width="40rpx" height="40rpx" src="/static/images/a40.png"></u-image>
								<view class="pay-name">微信支付</view>
							</view>
							<view class="right">
								<u-radio activeColor="#516DDB" name="1"></u-radio>
							</view>
						</view>
						<view class="payment-item center">
							<view class="left">
								<u-image width="40rpx" height="40rpx" src="/static/images/a41.png"></u-image>
								<view class="pay-name">余额支付</view>
								<view class="pay-tip">当前余额：123.23元</view>
							</view>
							<view class="right">
								<u-radio activeColor="#516DDB" name="2"></u-radio>
							</view>
						</view>
					</u-radio-group>
				</view>
			</view>
			<view class="pay-btn">
				<u-button throttleTime="1000" :customStyle="{height: '86rpx', letterSpacing: '.1rem', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)'}" :hairline="false" type="mini"
					shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">确认</u-button>
			</view>
		</view>
	</u-popup>
	
	<!-- 售后申请弹窗 -->
	<u-popup closeable bgColor="transparent" :show="salesPop" @close="salesPop = false">
		<view class="sales-pop">
			<view class="sales-content">
				<view class="title">
					请选择售后申请
				</view>
				<view :class="['sales-item', salesCurrent == i ? 'active' : '']" v-for="(item, i) in salesList" :key="item.id" @tap="salesCurrentChange(i)">
					<view class="left">
						<u-image width="100rpx" height="100rpx" :src="item.href"></u-image>
					</view>
					<view class="right">
						<view class="name">{{item.name}}</view>
						<view class="sub-name">{{item.subName}}</view>
					</view>
				</view>
			</view>
			<view class="pay-btn">
				<u-button throttleTime="1000" :customStyle="{height: '86rpx', letterSpacing: '.1rem', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)'}" :hairline="false" type="mini"
					shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="goSalesDetail">确认</u-button>
			</view>
		</view>
	</u-popup>
	
	<!-- 申请退货退款 -->
	<u-modal showCancelButton :show="applyRefundPop" title="申请退货退款" @cancel="applyRefundPop = false" @confirm="applyRefundPop = false" confirmColor="#516DDB">
		<view class="tip">是否要确定申请退货退款？</view>
	</u-modal>
 </template>

 <script setup>
	 import icon1 from '@/static/images/a59.png'
	 import icon2 from '@/static/images/a60.png'
	 import icon3 from '@/static/images/a61.png'
 	const orderStatus = ref(0)
 	onLoad(({
 		status
 	}) => {
 		orderStatus.value = status
 		uni.setNavigationBarTitle({
 			title: status == 1 ? '待支付订单' : '订单详情'
 		})
 	})

 	const cancelPop = ref(false)
 	const payPop = ref(false)
 	const salesPop = ref(false)
 	const applyRefundPop = ref(false)
	const salesCurrent = ref(1)
	const payment = ref('1')

 	// 单选
 	const radio = ref('1')
 	const radiolist = ref([{
 			name: '不想要了',
 		},
 		{
 			name: '选错/多选',
 		},
 		{
 			name: '收件人人填错了',
 		},
 		{
 			name: '商品选错了',
 		},
 		{
 			name: '有更便宜的了，不想要了/其他原因',
 		},
 	])
	
	const salesList = ref([
		{ name: '我要退货退款', id: 0,
		 subName: '我已收到货，需要退还收到的货物', href: icon1},
		 { name: '我要退款（无需退货）', id: 1,
		  subName: '未收到货，或与商家协商后申请', href: icon2},
		  { name: '我要换货', id: 2,
		   subName: '对收到的商品不满意，与商家协商换货', href: icon3},
	])
	// 切换
	const salesCurrentChange = index => {
		salesCurrent.value = index
	}
	// 跳转到售后详情
	const goSalesDetail = () => {
		uni.navigateTo({
			url: `/mine/commodity/after-sales?status=${salesCurrent.value}`
		})
	}
	// 申请退货退款弹窗
	const showApplyRefundPop = () => {
		applyRefundPop.value = true
	}
	// 三个弹窗显示
 	const showCancelPop = () => {
 		cancelPop.value = true
 	}
	const showPayPop = () => {
 		payPop.value = true
 	}
	const showSalesPop = () => {
 		salesPop.value = true
 	}
 	const goAddressList = () => {
 		uni.navigateTo({
 			url: '/mine/address/list?name=1'
 		})
 	}
	// 跳转售后详情
	const goAfterSalesDetail = () => {
		uni.navigateTo({
			url: '/mine/commodity/after-sales-detail'
		})
	}
 </script>

 <style lang="scss" scoped>
 	.container {
 		padding: 60rpx 26rpx 200rpx;
 	}
	.sales-box {
		padding: 28rpx 0;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 28rpx 0 30rpx;
		font-size: 32rpx;
		color: #516DDB;
		@include center();
		& > view {
			font-size: 32rpx;
			margin-right: 8rpx;
		}
	}
	.status-name {
		color: #F55726;
		font-weight: bold;
		.status {
			font-size: 32rpx;
		}
		.name {
			margin: 17rpx 0 28rpx;
			font-size: 28rpx;
		}
	}

 	.icon-box {
 		display: flex;
 		align-items: center;

 		&>view {
 			margin-right: 10rpx;
 			color: #516DDB;
			font-size: 28rpx;
 		}
 	}

 	.item {
		position: relative;
 		@include between(100%);
 		margin-bottom: 40rpx;
 		padding: 34rpx 38rpx;
 		background: #FFFFFF;
 		border-radius: 20rpx 20rpx 0 0;
		.icon {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 3;
		} 
		.user-info-box {
			@include between(100%);
			.user-info {
				@include start();
				.name {
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
					margin-right: 26rpx;
				}
			}
		}

 		.address {
 			margin-top: 24rpx;
 			font-size: 28rpx;
 			color: #000000;
 		}
 	}

 	.order-item {
 		margin-bottom: 30rpx;
 		padding: 38rpx 38rpx 1rpx;
 		background: #FFFFFF;
 		border-radius: 30rpx;

 		.address-box {
 			@include between(100%);
 			color: #000000;
 			font-size: 26rpx;
 			margin-bottom: 12rpx;

 		}

 		.last {
 			margin-top: 12rpx;
 		}

 		.status-box {
 			padding-bottom: 32rpx;
 			border-bottom: 1rpx solid #E8E8E8;
 			margin-bottom: 30rpx;

 			.name {
 				font-size: 30rpx;
 				font-weight: bold;
 				color: #000000;
 			}

 			.status {
 				color: #D66A44;
 			}

 			.status1 {
 				color: #AAAAAA;
 			}
 		}
		.commodity-box {
			@include between(100%, 100%);
			margin-bottom: 28rpx;
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid #F5F5F5;
			.right {
				flex: 1;
				margin-left: 22rpx;
				@include between(100%, 170rpx);
				flex-direction: column;
				align-items: flex-start;
				padding: 10rpx 0;
				color: #000000;
				font-size: 30rpx;
				.com-title {
					@include over-ellip(450rpx);
					font-weight: bold;
				}
			}
		}

 		.content-box {
 			width: 100%;
 			position: relative;
 			font-size: 26rpx;
 			color: #606672;

 			.content-item {
 				@include between(100%);
 				margin-bottom: 30rpx;
 				font-size: 28rpx;
 				color: #000000;
				.order-no {
					@include start();
					& > text {
						color: #312C2A;
						margin-right: 20rpx;
					}
					
				}

 				&>text {
 					&:nth-child(2) {
 						color: #312C2A;
 					}
 				}
				.copy {
					display: inline-block;
					margin-left: 22rpx;
					color: #516DDB;
					font-size: 30rpx;
				}
 			}

 			.icon {
 				position: absolute;
 				bottom: 0;
 				right: 0;
 				z-index: 99;
 			}
 		}
		
		.all-price-box {
			@include between(100%);
			font-size: 28rpx;
			color: #000000;
			padding-top: 26rpx;
			padding-bottom: 30rpx;
			border-top: 1rpx solid #f5f5f5;
			.price {
				font-size: 34rpx;
				color: #F55726;
			}
		}

 		.btns-box {
 			padding-top: 32rpx;
 			border-top: 1rpx solid #E8E8E8;
 			margin-top: 30rpx;
 			@include between(100%);

 			.message {
 				font-size: 26rpx;
 				color: #D66A44;
 			}
 		}
 	}
	
	.concat-card {
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		padding: 28rpx 0;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 32rpx;
		color: #516DDB;
		@include center(100%);
		& > view {
			margin-left: 10rpx;
		}
	}


 	.btn {
		padding-top: 26rpx;
		padding-right: 30rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
 		position: fixed;
		left: 0;
 		bottom: 0;
 		z-index: 999;
		@include end(100%);
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0,0,0,0.1);
		& > view {
			margin-left: 18rpx;
			
		}
 	}
	
	.pay-pop {
		width: 100%;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		.pay-content {
			padding: 43rpx 40rpx 0;
		}
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			margin-bottom: 60rpx;
		}
		.payment-select-box {
			.payment-item {
				@include between(100%);
				.left {
					@include start();
					.pay-name {
						color: #000000;
						font-size: 28rpx;
						margin-left: 16rpx;
					}
					.pay-tip {
						margin-left: 16rpx;
						color: #B3BCCC;
					}
				}
			}
			.center {
				margin: 50rpx 0 78rpx;
			}
		}
		.pay-btn {
			padding: 13rpx 55rpx 23rpx;
			box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0,0,0,0.1);
			
		}
	}
	
	.cancel-pop {
		padding: 40rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 1rpx rgba(153, 153, 153, 0.16);
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	
		.pop-title {
			color: #000000;
			font-size: 32rpx;
			font-weight: bold;
		}
	
		.info {
			margin-top: 14rpx;
			margin-bottom: 40rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			padding: 26rpx 30rpx;
			color: #000000;
	
			&>view {
				margin-bottom: 16rpx;
			}
		}
		.radio-wrap {
			margin-top: 36rpx;
		}
		.cancel-btn {
			// box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0,0,0,0.1);
			margin-top: 50rpx;
		}
	}
	
	.sales-pop {
		background: #F5F6F8;
		box-shadow: 0rpx 0rpx 30rpx 1rpx rgba(153,153,153,0.16);
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		.sales-content {
			padding: 43rpx 40rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				margin-bottom: 62rpx;
			}
			.sales-item {
				border: 2rpx solid #FFFFFF;
				@include start(100%);
				background: #FFFFFF;
				border-radius: 30rpx;
				padding: 40rpx 30rpx;
				margin-bottom: 40rpx;
				.right {
					margin-left: 20rpx;
					@include between(100%, 100rpx);
					align-items: flex-start;
					flex-direction: column;
					.name {
						font-size: 32rpx;
						color: #000000;
					}
					.sub-name {
						color: #999999;
						font-size: 28rpx;
					}
				}
			}
			.active {
				border: 2rpx solid #516DDB;
			}
		}
		.pay-btn {
			background: #FFFFFF;
			padding: 15rpx 55rpx 23rpx;
			box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0,0,0,0.1);
			
		}
	}
 </style>